import React, { useState, useEffect, useMemo } from 'react';
import classNames from 'classnames';
import './loading.scss';
import { bem } from '@/utils';

export interface LoaddingProps {
    visible?: boolean;
    type?: 'loading' | 'noMore';
    position?: string | undefined;
    style?: React.CSSProperties;
    loadingText?: string;
    noMoreText?: string;
}

const defaultProps = {
    visible: false,
    type: 'loading',
    position: 'center',
    loadingText: '正在加载',
    noMoreText: '已经到底了~'
};

const Loadding: React.FC<LoaddingProps> = (props) => {
    const { visible, type, position, style, noMoreText, ...rest } = { ...defaultProps, ...props };

    const b = bem('loading');
    const [visibleState, setVisibleState] = useState(visible);

    useEffect(() => {
        setVisibleState(visible);
    }, [visible]);

    const getLoad = useMemo(() => {
        if (!visibleState) {
            return;
        }

        if (type === 'loading') {
            return (
                <>
                    <div className="seal-loading__overlay"></div>
                    <i className={classNames(['seal-loading-icon'])}></i>
                </>
            )
        } else if (type === 'noMore') {
            return (
                <div className='seal-loading__noMore'>
                    <span className="seal-loading-text">{noMoreText}</span>
                </div>
            )
        }
    }, [visibleState]);

    const getPositionClass = () => {
        if (type === 'noMore') {
            return '';
        }
        return position ? `${b()}__${position}` : '';
    }

    return (
        <div className={classNames([b(), getPositionClass()])} style={style}>
            <div className={b('wrap')}>
                {getLoad}
            </div>
        </div>
    )

}

export default Loadding;